<template>
<div>
    <el-steps :active="active" align-center>
        <el-step title="选择餐桌" icon="el-icon-food"></el-step>
        <el-step title="开始点餐" icon="el-icon-fork-spoon"></el-step>
    </el-steps>
    <SelectTable v-if="active==1" @diancai="next"></SelectTable>
    <diancan v-if="active==2" :zhuoid="tableId" @diancai2="pre"></diancan>
    <!-- <el-button style="margin-top: 12px;" @click="pre">上一步</el-button> -->
    <!-- <el-button style="margin-top: 12px;" @click="next" v-if="active==1">下一步</el-button> -->
    <!-- <el-button style="margin-top: 12px;" @click="next" v-if="active==2">确定点餐</el-button> -->
</div>
</template>

<script>
import SelectTable from "../components/SelectTable";
import diancan from "../components/diancan";
export default {
    name: "oder",
    components: {
        SelectTable,
        diancan,
    },
    data() {
        return {
            active: 1,
            tableId: "",
        };
    },

    methods: {
        next(aa) {
            // 获取点菜的桌号
            this.tableId = aa;
            console.log(this.tableId);
            if (this.active < 2) {
                this.active++;
            }
        },
        pre() {
            if (this.active > 1) {
                this.active--;
            }
        },
    },
};
</script>
